<template>
  <div>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图 -->
      <el-card>
           <!-- 搜索栏 -->
          <el-row :gutter="20">
              <el-col :span="8">
                   <el-input v-model="qurryInfo.query" placeholder="请输入内容" clearable @clear="getUserList">
                       <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                   </el-input>
              </el-col>
              <el-col :span="4">
                  <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
              </el-col>
          </el-row>
          <!-- 用户列表区域 -->
          <el-table
              :data="userList"
              border
              stripe
              style="width: 100%">
                <el-table-column
                    type="index"
                    label="#"
                    width="auto">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="姓名"
                    width="auto">
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="邮箱"
                    width="auto">
                </el-table-column>
                <el-table-column
                    prop="mobile"
                    label="电话"
                    width="auto">
                </el-table-column>
                <el-table-column
                    prop="role_name"
                    label="角色"
                    width="auto">
                </el-table-column>
                <el-table-column
                    label="状态"
                    width="auto">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="auto">
                    <template slot-scope="scope">     
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDIalog(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>     
                        <el-tooltip effect="dark" :enterable="false" content="分配角色"  placement="top">
                             <el-button type="warning" icon="el-icon-setting" @click="setRole(scope.row)" size="mini"></el-button>
                        </el-tooltip>  
                    </template>
                </el-table-column>
          </el-table>
          <!-- 分页区 -->
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="qurryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="qurryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
           </el-pagination>
      </el-card>
      <!-- 添加用户对话框 -->
      <el-dialog
          title="添加用户"
          :visible.sync="addDialogVisible"
          @close="addDialogClosed"
          width="50%">
          <!-- 内容主体区 -->
          <el-form  :model="addForm" ref="addFromRef" :rules="addFormRules" label-width="70px">
              <el-form-item label="用户名" prop="username">
                  <el-input v-model="addForm.username" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                  <el-input v-model="addForm.password" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                  <el-input v-model="addForm.email" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="手机" prop="mobile">
                  <el-input v-model="addForm.mobile" placeholder=""></el-input>
              </el-form-item>
              
          </el-form>
          <!-- 底部区 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
          </span>
      </el-dialog>
      <!-- 修改用户对话框 -->
      <el-dialog
          title="修改用户"
          :visible.sync="eiditDialogVisible"
          @close="editDialogClosed"
          width="50%">
          <!-- 内容主体区 -->
          <el-form  :model="editForm" ref="editFormRef" :rules="editFormRules" label-width="70px">
              <el-form-item label="用户名">
                  <el-input v-model="editForm.username" disabled ></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                  <el-input v-model="editForm.email" ></el-input>
              </el-form-item>
              <el-form-item label="手机" prop="mobile">
                  <el-input v-model="editForm.mobile" ></el-input>
              </el-form-item>
              
          </el-form>
          <!-- 底部区 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="eiditDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
          </span>
      </el-dialog>
      <!-- 分配角色对话框 -->
      <el-dialog title="分配角色" 
      :visible.sync="setRoleDialogVisible"
      @close="setRoleDialgoClosed"
      width="50%"
      >
      <div>
          <p>当前用户:{{userInfo.username}}</p>
          <p>当前角色:{{userInfo.role_name}}</p>
          <p>
              分配新角色：
              <el-select v-model="selectedRoleId" placeholder="请选择角色">
                <el-option v-for="item in rolesList" :key="item.id"
                :label="item.roleName"
                :value="item.id"
                ></el-option>
              </el-select>
          </p>
      </div>
       <span slot="footer" class="dialog-footer">
          <el-button @click="setRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
        </span>
      </el-dialog>
 
  </div>
</template>

<script>
export default {
    data() {
        // 验证邮箱的规则
        var checkEmail = (rule,value,cb) =>{
           const regEmail =  /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
           if(regEmail.test(value)){
               return cb()
           }
           cb(new Error('请出入正确的邮箱'))
        }
        // 验证手机号码的规则
        var checkMobile = (rule,value,cb) =>{
            const regMoblie = /^[1][3,4,5,7,8][0-9]{9}$/
            if(regMoblie.test(value)){
                return cb()
            }
             cb(new Error('请出入正确的手机号'))
        }
        
        return {
            // 获取用户列表的参数
            qurryInfo:{
                query:'',
                pagenum:1,
                pagesize:2
            },
            // 用户列表信息
            userList:[],
            // 总数
            total:0,
            // 控制添加对话框显示与隐藏
            addDialogVisible:false,
            // 控制编辑对话框显示与隐藏
            eiditDialogVisible:false,
            // 添加用户表单
            addForm:{
                username:'',
                password:'',
                email:'',
                mobile:''
            },
            // 查询到的用户信息
            editForm:{},
            // 添加用户表单的校验信息
            addFormRules:{
                username:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:10,message:'用户名在3~10之间',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'},
                    {min:6,max:15,message:'用户名在6~15之间',trigger:'blur'}
                ],
                email:[
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                    {validator:checkEmail,trigger:'blur'}
                ],
                mobile:[
                     {required:true,message:'请输入手机号码',trigger:'blur'},
                     {validator:checkMobile,trigger:'blur'}
                ]
            },
            editFormRules:{
                email:[
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                    {validator:checkEmail,trigger:'blur'}
                ],
                mobile:[
                     {required:true,message:'请输入手机号码',trigger:'blur'},
                     {validator:checkMobile,trigger:'blur'}
                ]
            },
            // 控制分配角色对话框的显示与隐藏
            setRoleDialogVisible:false,
            // 需要被分配的用户信息
            userInfo:{},
            // 所有角色列表
            rolesList:[],
            // 已选中的ID值
            selectedRoleId:''
        }
    },
    created(){
        this.getUserList()
    },
    methods:{
      async getUserList(){
          const {data:res} = await this.$http.get('users',{ params:this.qurryInfo })
          if(res.meta.status !==200) return this.$message.error('获取用户列表失败')
          this.userList = res.data.users
          this.total = res.data.total
        //   console.log(res);
        },
        // 监听pageSize改变事件
        handleSizeChange(newSize){
            // console.log(newSize);
            this.qurryInfo.pagesize = newSize
            this.getUserList()
        },
        // 监听页码值改变事件
        handleCurrentChange(newPage){
            // console.log(newPage);
            this.qurryInfo.pagenum = newPage
            this.getUserList()
        },
        // 监听swithc开关状态事件
        async userStateChanged(userInfo){
            // console.log(userInfo);
            const {data:res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
            if(res.meta.status !==200) {
                userInfo.mg_state = !userInfo.mg_state
                return this.$message.error('更新用户失败')
            }
            this.$message.success('更新用户状态成功')
        },
        // 退出dialog框清空数据
        addDialogClosed(){
            this.$refs.addFromRef.resetFields()
        },
        // 点击按钮添加用户
        addUser(){
            this.$refs.addFromRef.validate(async valid =>{
                if(!valid) return
                // 发起用户网络请求
               const {data:res} = await this.$http.post('users',this.addForm)
               if(res.meta.status !=201){
                   this.$message.error('添加用户失败')
               }
               this.$message.success('添加用户成功！')
               this.addDialogVisible = false
            //    更新用户列表数据
               this.getUserList()
            //    console.log(res);
            })
        },
        // 展示编辑用户对话框
        async showEditDIalog(id){
            const {data:res} = await this.$http.get('users/'+ id)
            if(res.meta.status !==200) return this.$message.error('查询用户信息失败')
            this.editForm = res.data
            this.eiditDialogVisible = true
        },
        // 监听编辑清空事件
        editDialogClosed(){
             this.$refs.editFormRef.resetFields()
        },
        // 修改用户信息提交
         editUserInfo(){
            this.$refs.editFormRef.validate(async valid=>{
                if(!valid) return
                // 发起用户信息的数据请求
                 const {data:res} = await this.$http.put('users/'+ this.editForm.id,{
                     email:this.editForm.email,
                     mobile:this.editForm.mobile
                 })
                 if(res.meta.status !=200) {
                      return  this.$message.error('更新用户失败！')
                    }
                this.eiditDialogVisible = false
                this.getUserList()
                this.$message.success('修改成功！')
            })
        },
        // 删除用户信息
       async removeUserById(id){
            // 弹框提示
            const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err =>{return err})
            if(confirmResult !=='confirm'){
                return this.$message.info('以取消删除')
            }
           const {data:res} = await this.$http.delete('users/' + id)
           if(res.meta.status !== 200){
               return this.$message.error('删除用户失败')
           }
           this.$message.success('删除用户成功')
           this.getUserList()
        },
        // 展示分配角色的对话框
       async setRole(userInfo){
            this.userInfo = userInfo
            // 获取所有角色列表
            const {data:res} = await this.$http.get('roles')
            if(res.meta.status !=200){
                return this.$message.error('获取角色列表失败！')
            }
            this.rolesList = res.data
            this.setRoleDialogVisible = true
           
        },
        // 点击按钮分配角色
        async saveRoleInfo(){
            if(!this.selectedRoleId){
                return this.$message.error('请选择要分配的角色！')
            }
            const{data:res} = await this.$http.put(`users/${this.userInfo.id}/role`,
            {
                rid:this.selectedRoleId
            })

            if(res.meta.status !=200){
                return this.$message.error('更新用户失败！')
            }
            this.$message.success('更新用户成功!')
            this.getUserList()
            this.setRoleDialogVisible = false
        },
        // 监听分配角色对话框关闭事件
        setRoleDialgoClosed(){
            this.selectedRoleId = '',
            this.userInfo = {}
        }
    }
}
</script>

<style lang="less" scoped>

</style>